<template>
  <t-modal
    title="线下流程"
    width="1120px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-modal-container"
    v-bind="footer"
    forceRender
    :confirmLoading="submitLoading"
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="dragdrop-image-upload" v-if="isEmptyObject(uploadSource)">
          <!-- image/* -->
          <a-upload-dragger
            name="file"
            :showUploadList="false"
            :beforeUpload="beforeUpload"
            accept=".png,.jpg,.jpeg,.bmp,.gif,.pdf"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              单击或拖动文件到此区域进行上传
            </p>
            <p class="ant-upload-accept">
              支持.png，.jpg，.jpeg，.bmp，.gif，.pdf格式
            </p>
          </a-upload-dragger>
        </div>
        <div v-else class="view-image">
          <div class="delete-img" @click="handleDelete()">
            <a-icon type="close" />
          </div>
          <iframe
            :src="fileUrl"
            frameborder="0"
            id="preFileIframe"
            width="100%"
            height="100%"
          ></iframe>
        </div>
        <a-form-model-item
          label="是否启用"
          prop="isOfflineProcess"
          :rules="{
            required: true,
            message: '请选择是否启用',
          }"
          ><a-radio-group v-model="form.isOfflineProcess">
            <a-radio :value="1">
              是
            </a-radio>
            <a-radio :value="0">
              否
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
//上传图片
import bjUploadImg from "@/components/extendCustom/bj-upload-img";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/TopVUI";
export default {
  components: {
    bjUploadImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      footer: {},
      submitLoading: false,
      form: {
        //是否启用
        isOfflineProcess: 1,
      },
      rules: {},
      uploadSource: {},
      fileType: "",
      fileUrl: "",
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },

  methods: {
    //拖拽上传-上传文件之前钩子
    beforeUpload(file) {
      if (file) {
        this.handleUploadFile(file);
      }
      return false;
    },

    handleUploadFile(file) {
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.uploadSource = {
            name: file.name,
            dfsFileUuid: res.dfsFileUuid,
            url: res.url,
          };
          this.fileUrl =
            this.kkFileView +
            "/onlinePreview?url=" +
            encodeURIComponent(Base64.encode(res.url)) +
            "&watermarkTxt=" +
            //水印内容
            encodeURIComponent("") +
            "&token=" +
            getToken();
        })
        .catch((_) => {})
        .finally((_) => {});
    },

    //是否是空对象
    isEmptyObject(obj) {
      return Object.keys(obj).length == 0;
    },

    handleDelete() {
      this.uploadSource = {};
      this.fileUrl = "";
      this.fileType = "";
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { form, uploadSource } = this;

          if (form.isOfflineProcess == 1) {
            if (!uploadSource.url) {
              return this.$message.info("请上传图片");
            }
          }

          let formJson = {
            //是否启用
            isOfflineProcess: form.isOfflineProcess,
            //文件
            offlineProcessFile: JSON.stringify(uploadSource),
          };
          this.submitLoading = true;
          axios
            .post(
              `/probusiness/configProcessNode/updateOfflineProcess`,
              formJson,
              {
                headers: {
                  "Content-Type": "application/json;charset=UTF-8",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.closeModal();
                this.$parent.getData();
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {
              this.submitLoading = false;
            });
        }
      });
    },

    //重置表单
    resetForm() {
      this.uploadSource = {};
      this.form = {
        //是否启用
        isOfflineProcess: 1,
      };
      this.$refs.ruleForm.resetFields();
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 24px 32px;
      max-height: 700px;
      overflow: auto;
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 80px;
          label {
            color: #333333;
          }
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
      }
      .bj-upload-file {
        .choosed-file-warp {
          width: 100%;
        }
      }
      .dragdrop-image-upload {
        height: 560px;
        background: #f7f7f7;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #d9d9d9;
        .ant-upload-drag {
          background: unset;
          border: 0;
          .ant-upload-btn {
            padding: 0;
          }
          .ant-upload-accept {
            color: #ff4d4f;
            font-size: 14px;
          }
        }
      }
      .view-image {
        height: 560px;
        background: #f7f7f7;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #d9d9d9;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }

        .delete-img {
          position: absolute;
          top: -1px;
          right: -1px;
          width: 40px;
          height: 32px;
          background: rgba(255, 45, 45, 0.6);
          border-radius: 0px 6px 0px 50px;
          .anticon-close {
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
